<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="auto">
        <el-scrollbar :style="'height:'+wh+'px'">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            :default-active="$route.path"
            text-color="#fff"
            router
          >
            <el-menu-item :index="'/index'">
              <el-icon>
                <span class="iconfont icon-shouye1"></span>
              </el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu v-for="item in pages" :key="item.name" :index="'/index/'+item.path">
              <template #title>
                <el-icon>
                  <span :class="'iconfont ' +item.meta.icon"></span>
                </el-icon>
                <span>{{item.meta.title}}</span>
              </template>
              <el-menu-item-group v-for="ite in item.children" :key="ite.name">
                <el-menu-item
                  :index="'/index/'+item.path+'/'+ite.path"
                  @click="menuclick(ite,'/index/'+item.path+'/'+ite.path)"
                >{{ite.meta.title}}</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header>
          <div class="bread">
            <img
              class="bresd-icon"
              @click="cols"
              :class="isCollapse?'action':''"
              src="@/assets/admin/bread.png"
              alt
            />
            <div class="bread-title">
              <breadcrumb />
            </div>
            <div class="bread-component">
              <div class="bread-component-con">
                <span>
                  <colorStyle />
                </span> |
                <span>
                  <fontSize />
                </span> |
                <span>
                  <fullScreen />
                </span> |
                <div class="bread-component-con-myself">
                   <myself />
                </div>
              </div>
            </div>
          </div>
          <div>
            <tag />
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import breadcrumb from "../components/Breadcrumb.vue";
import colorStyle from "../components/ColorStyle.vue";
import fontSize from "../components/FontSize.vue";
import fullScreen from "../components/FullScreen.vue";
import myself from "@/components/myself.vue";
import tag from "../components/tag.vue";
import pages from "@/router/pages";
import { mapActions } from "vuex";
// import menutag from '@/store/menutag';
export default {
  components: {
    // main,
    breadcrumb,
    colorStyle,
    fontSize,
    fullScreen,
    tag,
    myself,
  },

  data() {
    return {
      // format:"",
      wh: window.innerHeight,
      pages,
      isCollapse: false,
    };
  },
  watch: {
    $route(val) {
      this.watchrouter(val);
    },
  },
  methods: {
    ...mapActions(["watchrouters"]),
    cols() {
      this.isCollapse != this.isCollapse;
    },
    watchrouter(val) {
      this.watchrouters(val);
    },
    menuclick(e, path) {
      // console.log(e,path);
      //   this.menutags(e)
      // this.$router.path=path
    },
  },
};
</script>
<style lang="less" scoped>

.el-header {
  height: 100px;
  background-color: rgb(240, 246, 251);
  padding: 0;
  .bread {
    height: 50px;
    border-bottom: #eaedef 1px solid;
    .bresd-icon {
      width: 30px;
      height: 30px;
      margin: 10px;
      float: left;
    }
    .action {
      transform: rotate(180deg);
    }
    .bread-title {
      margin-top: 20px;
      float: left;
    }
    .bread-component {
      float: right;
      margin-right: 100px;
      .bread-component-con{
        display: flex; white-space: nowrap;margin-top:15px;
        .bread-component-con-myself{
         margin-left: 15px;

        }
      }
      
    }
  }
}
.el-aside {
  height: calc(100vh); //自适应
   overflow-y: hidden;
  background-color: #545c64;
  .el-menu-vertical-demo {
    border: #545c64 1px solid;
  }
  .menu-img {
    width: 50px;
  }
}
.el-main {
  background-color: rgb(236, 244, 241);
}
</style>